<route lang="json5" type="success">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '提交成功',
  },
}
</route>
<template>
  <view class="container">
    <!-- 顶部LOGO以及标题 -->
    <view class="top-container">
      <view class="logo"></view>
      <view class="logo-bottom"></view>
      <view class="container-title">灵活用工管理系统信息提示</view>
      <view class="title-underline"></view>
      <!-- 新增的实线 -->
    </view>
    <view class="content-container">
      <view class="content-top">
        <view class="icon icon-1"></view>
        <view class="content">感谢您提供的信息，如需查看个人信息，请再次扫描二维码进行登录</view>
      </view>
      <view class="content-middle">
        <view class="icon icon-2"></view>
        <view class="content">
          待我们工作人员完成审核后，您的手机会收到签署劳动合同及相关附件的消息，请留意您的手机消息通知。
        </view>
      </view>
      <view class="content-bottom">
        <view class="icon icon-3"></view>
        <view class="content">
          在此期间，您有任何疑问，请和我们的工作人员联系，电话：0512-88886666，或者发送邮件到：AAA@Test.com
          。
        </view>
      </view>
    </view>
    <wd-button mt-5 block @click="exitApp">关闭小程序</wd-button>
  </view>
</template>

<script setup>
const exitApp = () => {
  console.log('exitApp')
  uni.exitMiniProgram()
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-image: url('http://hrise.heartful.com.cn/heartful/assets/loginbg.png');
  background-repeat: no-repeat;
  background-position: center;
}
// 顶部区域
.top-container {
  position: relative;
  display: flex; /* 添加 */
  flex-direction: column; /* 添加 */
  align-items: center; /* 可选，使元素水平居中 */
  width: auto;
  height: 200px;
  margin-top: 50px;
}
// LOGO
.logo {
  position: absolute; /* 使用绝对定位 */
  top: -10px; /* 使 logo 向上移动 5px */
  width: 55px;
  height: 80px;
  background-image: url('http://hrise.heartful.com.cn/heartful/assets/top.png');
  background-repeat: no-repeat;
  background-position: center;
}
.logo-bottom {
  width: 280px;
  height: 170px;
  background-image: url('http://hrise.heartful.com.cn/heartful/assets/bottom.png');
  background-repeat: no-repeat;
  background-position: center;
}
// 小程序标题
.container-title {
  font-size: 20px;
  line-height: 15px;
  color: #277ef9;
}
.title-underline {
  width: 100%; /* 实线宽度 */
  height: 3px; /* 实线高度 */
  margin-top: 15px; /* 实线与文字之间的间距 */
  background-color: #1d78fa; /* 实线颜色 */
}
.content-container {
  display: flex;
  flex-direction: column; /* 添加 */
  align-items: center; /* 可选，使元素水平居中 */
  padding: 0 20px 0 10px;
  margin-bottom: 30px;
}
.content-top {
  display: flex;
  flex-direction: row; /* 添加 */
  align-items: center; /* 可选，使元素水平居中 */
  height: 80px; /* 固定高度 */
}
.content-middle,
.content-bottom {
  display: flex;
  flex-direction: row; /* 添加 */
  align-items: center; /* 可选，使元素水平居中 */
  height: 100px; /* 固定高度 */
}
.icon {
  position: relative; /* 使伪元素相对定位 */
  z-index: 1;
  width: 55px;
  height: 55px;
  background-image: url('http://hrise.heartful.com.cn/heartful/wechat/icon1.png');
  background-repeat: no-repeat;
  background-position: center;
}
/* 添加数字 1 */
.icon.icon-1::before {
  position: absolute;
  top: 65%; /* 垂直居中 */
  left: 43%; /* 水平居中 */
  z-index: 2; /* 确保文本在图片之上 */
  font-size: 20px;
  color: #ffffff; /* 纯白色 */
  content: '1';
  transform: translate(-50%, -50%);
}
/* 添加数字 2 */
.icon.icon-2::before {
  position: absolute;
  top: 65%; /* 垂直居中 */
  left: 43%; /* 水平居中 */
  z-index: 2; /* 确保文本在图片之上 */
  font-size: 20px;
  color: #ffffff; /* 纯白色 */
  content: '2';
  transform: translate(-50%, -50%);
}
/* 添加数字 3 */
.icon.icon-3::before {
  position: absolute;
  top: 65%; /* 垂直居中 */
  left: 43%; /* 水平居中 */
  z-index: 2; /* 确保文本在图片之上 */
  font-size: 20px;
  color: #ffffff; /* 纯白色 */
  content: '3';
  transform: translate(-50%, -50%);
}
/* 添加光圈 */
.icon::after {
  position: absolute;
  top: 15px;
  left: 4px;
  z-index: -1; /* 确保光圈在图片之下 */
  width: 70%;
  height: 70%;
  content: '';
  background-color: #1372f8;
  border-radius: 50%; /* 圆角 */
  opacity: 0.5; /* 调整透明度 */
}
.content {
  width: 270px;
  font-size: 16px;
  line-height: 24px;
  color: #3c84ea;
  text-align: justify; /* 文本两端对齐 */
  white-space: pre-wrap; /* 保留空格并允许换行 */
}
</style>
